<template>
    <div class="app-teach">
        <div class="head">
            <el-avatar :size="120" :src="teimg"></el-avatar>
            <p>{{tename}}老师</p>
        </div>
        <div class="body">
            <el-tabs v-model="activeTab" type="card" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="课程管理" name="first">
                    <h1>课程管理</h1>
        <el-table :data="courses" border style="width: 100%">
        <el-table-column prop="img" label="课程封面" width="180" >
          <template #default="{row}">
          <img v-if="row.img" :src="row.img" alt="封面" style="width: 100%; height: 140px; " />
        </template>
       
        </el-table-column>
        <el-table-column prop="name" label="课程名称" width="180" />
        <el-table-column prop="createTime" label="创建时间"  width="180"/>
        <el-table-column prop="updateTime" label="修改时间"  width="180"/>
        <el-table-column prop="studiedNumber" label="学生人数"  width="160"/>
        <el-table-column label="操作"  width="180">
          <template #default="{row}">
        <el-button
          link
          type="primary"
          size="small"
          @click="deleteRow(row.id)"
        >
          删除
        </el-button>
        
        <el-button
          link
          type="primary"
          size="small"
          @click="addLesson(row.id)"
        >
          编辑
        </el-button>
        

      </template>
        </el-table-column>
  </el-table>

  <!-- 添加课程 -->
   <el-button text @click="dialogFormVisible = true" id="addbut" type="primary">
    添加课程
  </el-button>

  <el-dialog v-model="dialogFormVisible" title="添加课程">
    
    <el-form >
     
      <el-form-item label="课程名称" :label-width="formLabelWidth">
        <el-input v-model="coursename" type="text"/>
      </el-form-item>
      <el-form-item label="课程封面" :label-width="formLabelWidth">
      <Avatar class="upava" @uploadImg="uploadImg" :url="img"/>
      </el-form-item>
      <el-form-item label="课程简介" :label-width="formLabelWidth" >
      <el-input :rows="3"  type="textarea" v-model="courseintro"/>
      </el-form-item>
      <el-button size="large" class="subBtn" @click="addcourse" >
                添加
      </el-button>
    </el-form>
  </el-dialog>
                </el-tab-pane>
                <!-- <el-tab-pane label="测评管理" name="second">
                   <h1>测评管理</h1> -->
        <!-- <el-table  border style="width: 100%">
        <el-table-column prop="img" label="测评封面" width="180" >
          <template #default="{row}">
          <img v-if="row.img" :src="row.img" alt="封面" style="width: 100%; height: 140px; " />
        </template>
       
        </el-table-column>
        <el-table-column prop="name" label="测评名称" width="180" />
        <el-table-column prop="createTime" label="创建时间"  width="180"/>
        <el-table-column prop="studentCount" label="学生人数"  width="160"/>
        <el-table-column label="操作"  width="180">
          <template #default="{row}">
        <el-button
          link
          type="primary"
          size="small"
          @click="deleteRow(row.id)"
        >
          删除
        </el-button>
        
        <el-button
          link
          type="primary"
          size="small"
         
        >
          编辑
        </el-button>
        

      </template>
        </el-table-column>
  </el-table> -->

  <!-- 添加课程 -->
   <!-- <el-button text @click="dialogTestVisible = true" id="addbut" type="primary">
    添加测评
  </el-button>

  <el-dialog v-model="dialogTestVisible" title="添加测评">
    
    <el-form >
     
      <el-form-item label="测评名称" :label-width="formLabelWidth">
        <el-input v-model="testname" type="text"/>
      </el-form-item>
      <el-form-item label="测评封面" :label-width="formLabelWidth">
      <Avatar class="upava" @uploadImg="uploadTestImg" />
      </el-form-item>
      <el-form-item label="试题文件" :label-width="formLabelWidth">
        <Video @uploadVideo="uploadVideo"/>
      </el-form-item>
      <el-form-item label="测评简介" :label-width="formLabelWidth" >
      <el-input :rows="3"  type="textarea" v-model="testintro"/>
      </el-form-item>
      <el-button size="large" class="subBtn" @click="addtest" >
        添加
      </el-button>
    </el-form>
  </el-dialog>
                </el-tab-pane> -->
                
            </el-tabs>
        </div>
        
    </div>
</template>
<script setup>

import Avatar from '../../components/upcourse.vue'
import {addCourseAPI} from '../../apis/course'
import {getCourseAPI} from '../../apis/course'
import {deleteCourseAPI} from '../../apis/course'
import {onMounted, ref} from 'vue'
import { useRouter } from 'vue-router'
import {findUserAPI} from '@/apis/home'
import Video from '../../components/uploadVideo.vue'


const courses = ref([])
const activeTab = ref('first')
const dialogFormVisible = ref(false)
const dialogTestVisible = ref(false)
const dialogLesVisible = ref(false)
const formLabelWidth = '80px'
const img = ref('')
const coursename = ref('')
const courseintro = ref('')
const courseid = ref('')
const showDialog =ref(false)


const tename = ref('')
const teimg = ref('')



const testname = ref('')
const testimg = ref('')
const testurl = ref('')
const testintro = ref('')

const getUserInfo = async () => {
    try { 
      
        const res = await findUserAPI();
        tename.value = res.data.data.name
        teimg.value = res.data.data.avatar
       

        return res;
        
    } catch (error) {
        console.error(error);
    }
}
onMounted(()=>{
  getUserInfo()
})

const router = useRouter()
const uploadImg = (imgUrl)=> {
      // 在这里处理接收到的子组件传递的值
      img.value = imgUrl
      
    } 
const addcourse = async() =>{
 
  await addCourseAPI(coursename.value,img.value,courseintro.value)
  location.reload()
}
const getcourse = async()=>{
  const res = await getCourseAPI()
  courses.value = res.data
  
}
const addLesson = (id)=>{
  router.push(`/addlesson/${id}`)

}
const detailRow = (id)=>{
  
  router.push(`/courseintro/${id}`)
}

const deleteRow = async(id)=>{
  await deleteCourseAPI(id)
  location.reload()
}




onMounted(()=>{
  getcourse()
})


const uploadTestImg =(img)=>{
  testimg.value = img
}

const uploadVideo = (url)=>{
  testurl.value = url
}

const addtest = async()=>{
  
}









</script>
<style scoped>
.app-teach {
    width: 1100px;
    margin: 0 auto;
    background-color: #fff;
}
.head{
    height: 200px;
    /* background-color: rgb(92,92,92); */
    margin-top: 20px;
    display: flex;
    padding: 20px 30px;
    align-items: center;
    /* border-bottom: 1px solid #000; */
}
.head p {
    /* color: #fff; */
    margin-left: 30px;
    font-size: 26px;
}
.body{
    padding: 20px 20px;
     margin-bottom: 30px;
}
  table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
    tr:nth-child(even) {
      background-color: #dddddd;
    }
    .form-group {
      margin-bottom: 10px;
    }
    .form-group label {
      display: block;
      font-weight: bold;
    }
    .form-group input[type="text"] {
      width: 300px;
    }
    .form-group input[type="submit"] {
      padding: 5px 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
.subBtn{
 margin-left: 180px;
}
#addbut{
  margin-top: 20px;

}
</style>